<template>
    <div class="list">
        <!-- 渲染多个商品(列表) -->
        <div class="good" v-for="(item,index) in tabs[currentIndex].list" :key="index">
            <div class="imgbox">
            <img :src="item.pic" alt="">
            </div>
            <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="price">¥{{item.price}} <span class="jia">+</span></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    //通过props接收从父组件传来的值,该值是只读的(不能修改).
    props: ['tabs','currentIndex']
}
</script>

<style lang='scss' scoped>
.list{
  flex:1;
}
.list .good{
  display: flex;
  margin: 10px 0;
}
.list .good .imgbox{
  width: 80px;
  margin-right: 10px;
}
.list .good .imgbox img{
  width: 100%;
}
.price{
  color:red;
  margin-top: 20px;
}
.price span {
  display: inline-block;

  padding-left: 100px;
  // border: 1px solid blue;
  width: 10px;
  color: blue;
}
</style>